import React, { Component } from 'react';
import './rank.css';
import { BrowserRouter as Router, Route, Link, Switch} from 'react-router-dom';

class Rank extends Component {
    
    constructor(propos){
        super();

        this.props = propos;

    }

    renderRank(){

        let data = this.props.data;

        return data.map((value, index)=>{

            let stelys = "rank-member";

            switch(index){
                case 0 :
                    stelys += " rank-one";
                break;

                case 1 :
                    stelys += " rank-two";
                break;

                case 2 :
                    stelys += " rank-three";
                break;

                default:
                break;
            }

            return (
                <Link key={index} to={"/detail/"+value.book}>
                    <div className="rank-member-box ">
                    <div className={stelys}>
                        <div className="rank-cover">
                            <img alt='' src={value.img} />
                        </div>
                        <span className="rank-page rank-span">{value.name}</span>
                        <span className="rank-label rank-span">{value.lable}</span>
                        <span className="rank-hot rank-span"><i className="iconfont icon icon-favorfill"></i>人气值: {value.score}</span>
                        <span className="rank-score">{index+1}</span>
                    </div>
                    </div>
                </Link>
            );

        });

    }


    render() {

        let rank = this.renderRank();

        return (
            <div className="rank">
               <div className="rank-title">
                   <i className="icon iconfont icon-paihangbang phb"></i>人气榜
               </div>
               {rank}
           </div>
        );
    }
}

export default Rank;